<template>
	<view class="collect">
		<view class="paging">
			<z-paging ref="paging" v-model="dataList" :auto="false" :fixed="false" @query="onQueryList">
				<view class="paging-item" v-for="(item,index) in dataList" :key="index" @click="onTReport(item)">
					<view class="item-t">
						<view>
							<image class="image" :src="item.tongue.imageOrigin"></image>
						</view>
						<view>
							<view class="t-head">
								<view class="title">舌像得分</view>
								<view class="score">
									<view class="num">{{item.diagnose.score || '0'}}</view>
									<view class="unit">分</view>
								</view>
								<!-- <view class="status">良好</view> -->
							</view>
							<view class="date">{{item.tongue.createTime || ''}}</view>
						</view>
					</view>
					<view class="item-b">
						结果：{{item.diagnose.zhengHou || ''}}
					</view>
				</view>
				
			</z-paging>
		</view>
		<!-- 提示语 -->
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	//引入请求文件
	import {listing} from '../../api/api.js'
	import {aiTongueList} from '../../api/request.js'
	export default {
		data(){
			return{
				//列表数据
				dataList:[],
			}
		},
		mounted() {
			this.$refs.paging.reload()
		},
		methods:{
			onQueryList(page, pageSize){
				uni.showLoading({title:'加载中'})
				listing(aiTongueList+`?pageNum=${page}&pageSize=${pageSize}`)
				.then(res=>{
					if(res.data.code == 200){
						this.$refs.paging.complete(res.data.data.resultList)
						uni.hideLoading();
					}else{
						this.$refs.paging.complete(false)
						this.$refs.uToast.show({
							type: 'error',
							message: res.data.msg
						})
						uni.hideLoading();
					}
				})
				.catch(err=>{
					uni.hideLoading();
				})
			},
			onTReport(item){
				uni.navigateTo({
					url:'../../packagesAiPhoto/aiPhoto/tReport?id='+item.tongue.id
				})
			}
		}
		
		
	}
</script>

<style lang="scss" scoped>
	.collect{
		width: 100vw;
		height: 100vh;
		background: #F6F7F8;
		.paging{
			height: calc(100vh - 88rpx);
			padding: 30rpx 20rpx;
			.paging-item{
				background: #fff;
				border-radius: 16rpx;
				padding: 22rpx 32rpx;
				margin-bottom: 24rpx;
				font-weight: 400;
				box-sizing: border-box;
				.item-t{
					display: flex;
					align-items: center;
					.image{
						width: 120rpx;
						height: 120rpx;
						border-radius: 12rpx;
						margin-right: 16rpx;
					}
					.t-head{
						display: flex;
						align-items: center;
						margin-bottom: 20rpx;
						.title{
							color: #333;
							font-size: 32rpx;
						}
						.score{
							display: flex;
							align-items: center;
							color: #ad4b3c;
							font-size: 40rpx;
							margin: 0 12rpx;
						}
						.status{
							color: #fff;
							background: #00b35c;
							border-radius: 8rpx;
							padding: 2rpx 12rpx;
							font-size: 24rpx;
						}
					}
					.date{
						font-size: 24rpx;
						color: #898783;
					}
				}
				.item-b{
					font-size: 28rpx;
					color: #5a5752;
					margin-top: 20rpx;
				}
			}
		}
	}
</style>